<template>
	<view class="homemianbox">
		<qi_navigation :navzuoicof="'icon-icon-test59'" />
		<qi_tabControl
			:titles="['热销', '推荐', '最新']"
			@tabClick="tabClick"
		></qi_tabControl>
		<scroll-view
			scroll-y
			class="scroll"
			:scroll-top="data.windsessionStorageScroll.num"
			@scrolltolower="tolower"
			@scroll="refscroll"
		>
			<view class=" back-top" v-show="isShow" @tap="TapclickNavback">
				<view class="iconfont icon-qudingbu"></view>
			</view>
			<view>
				<swiper indicator-dots autoplay class="swiper">
					<swiper-item v-for="(item, i) in data.slidesdata" :key="i">
						<image
						:src="item.img_url"
							class="img"
							mode="widthFix"
						></image>
		<!-- <trigger-lazyLoad :src="item.img_url" class="img"/> -->
					</swiper-item>
				</swiper>
				<qi_homegoods :goods="goodslist"></qi_homegoods>
			</view>
			<qi_tolower>
				<view v-show="!isLastPage">加载中。。。</view>
			</qi_tolower>
		</scroll-view>
	</view>
</template>

<script setup>
import { getindexgoods } from '@/http/home.js';
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	computed,
	nextTick,
	getCurrentInstance
} from 'vue';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const store = useStore();
const defaultPic = ref(
	'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
);
const data = reactive({
	slidesdata: [],
	goods: {
		sales: { page: 1, data: [] },
		recommend: { page: 1, data: [] },
		new: { page: 2, data: [] }
	},
	windsessionStorageScroll: { num: 1, type: '' }
});
let { getters } = useStore();
let currentType = ref('sales');
let isLastPage = ref(true);
let isShow = ref(false);
let scrollTop = ref(0);
let tabIndex = ref(0);
let goodslist = computed(() => data.goods[currentType.value].data);
onMounted(() => {
	getHomedata('sales');
});
const getHomedata = type => {
	const params = {};
	params.page = data.goods[type].page + 1;
	// 判断currentIndex添加不同的筛选参数
	if ('sales' == type) {
		params.sales = 1;
	} else if ('recommend' == type) {
		params.recommend = 1;
	} else if ('new' == type) {
		params.new = 1;
	}
	getindexgoods(params).then(res => {
		if (Object.keys(res.goods.data).length !== 0) {
			data.slidesdata = res.slides;
			data.goods[type].data.push(...res.goods.data);
			data.goods[type].page + 1;
			isLastPage.value = res.goods.next_page_url ? false : true;
		}
	});
};
// 点击
const tabClick = i => {
	if (tabIndex.value === i) return;
	let scoltop = {
		type: currentType.value,
		num: scrollTop.value.toFixed(2)
	};
	store.dispatch('qi_home/addDataListCart', scoltop);
	tabIndex.value = i;
	Tabswitch(i);
};
const Tabswitch = i => {
	switch (i) {
		case 0:
			currentType.value = 'sales';
			break;
		case 1:
			currentType.value = 'recommend';
			break;
		case 2:
			currentType.value = 'new';
			break;
	}
	if (data.goods[currentType.value].data.length === 0) {
		getHomedata(currentType.value);
	}
	let scoltop = store.state.qi_home.vuexhomenavtop.find(
		x => x.type == currentType.value
	) || { num: 0, type: '' };
	nextTick(() => {
		data.windsessionStorageScroll = scoltop;
	});
};
const tolower = () => {
	if (!isLastPage.value) {
		getHomedata(currentType.value);
	} else {
		proxy.islogin.showToast('触底了');
	}
};
const refscroll = e => {
	scrollTop.value = e.detail.scrollTop;
	e.detail.scrollTop > 600
		? (isShow.value = true)
		: (isShow.value = false);
};
const TapclickNavback = () => {
	data.windsessionStorageScroll.num =
		data.windsessionStorageScroll.num === 0 ? 1 : 0;
};
</script>
<style lang="scss">
.homemianbox {
	height: 100vh;
	.scroll {
		height: calc(100vh - 100rpx - var(--window-bottom));
		 // #ifndef H5 
		// height: calc(100vh - 100rpx - var(--window-bottom) - 20rpx);
			// #endif 
		.swiper {
			image {
				width: 100%;
			}
		}
	}
	.back-top {
		position: fixed;
		bottom: 150rpx;
		right: 20rpx;
		text-align: center;
		z-index: 9;
		.iconfont {
			font-size: 16rpx;
			line-height: 50rpx;
			box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.4);
			height: 50rpx;
			width: 50rpx;
			border-radius: 50%;
			background-color: #fff;
			// z-index: -10;
			color: red;
		}
	}
}
</style>
